<template>

    <div class="goods">
      <div class="menu-wrapper" ref="menuWrapper">
        <ul>
          <li class="menu-item" v-for="(item, index) in goods"
              :class=""
              @click="clickMenuItem(index,$event)">
          <span class="text border-1px">
            <span class="icon" v-if="item.type>0" :class="classMap[item.type]"></span>{{item.name}}
          </span>
          </li>
        </ul>
      </div>
      <div class="foods-wrapper" ref="foodsWrapper">
        <ul ref="foodsWarpperUl">
          <li class="food-list food-list-hook" v-for="item in goods">
            <h1 class="title">{{item.name}}</h1>
            <ul>
              <li class="food-item border-1px" v-for="food in item.foods">
                <div class="icon">
                  <img width="57" height="57"
                       :src="img+food.image_path">
                </div>
                <div class="content">
                  <h2 class="name">{{food.name}}</h2>
                  <p class="desc">{{food.description}}</p>
                  <div class="extra">
                    <span class="count">月售{{food.sellCount}}份</span>
                    <span>好评率{{food.rating}}%</span>
                  </div>

                  <div class="price">
                    <span class="now">￥{{food.__v}}</span>
                    <span class="old" v-show="food.false">￥{{item.__v}}</span>
                  </div>

                  <div class="cartcontrol-wrapper">
                    <CartControl :food="food"/>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <shop-cart/>
    </div>

</template>

<script>
  import {mapState} from 'vuex'
  import BScroll from 'better-scroll'
  import CartControl from '../../../../components/pages/Twolevelrouting/goods/CartControl.vue'
  import ShopCart from '../../../../components/pages/Twolevelrouting/goods/ShopCart.vue'

  export default{
    data () {
      return {
        classMap: ['decrease', 'discount', 'special', 'invoice', 'guarantee'],
        scrollY: 0, //右侧Y轴滑动的坐标
        tops: [], // 包含右侧所有分类小列表的top值
        goods:[],
        img:'http://cangdu.org:8001/img/',
        is_selected:true
      }
    },
    components:{
      ShopCart,
      CartControl
    },
    mounted () {
      // 使用axios请求mockjs提供的接口
      // this.$store.dispatch('getShopGoods', () => {// goods更新了, 界面还没有更新
      //   this.$nextTick(() => {
      //     // 初始化滚动
      //     this._initScroll()
      //     // 初始化tops
      //     this._initTops()
      //   })
      // })
      this.msg()
    },

    methods: {
    //   async a(){
    //   var abc = await this.$axios.get('http:')
    //   },
      async msg(){
        var res = await this.$axios.get('http://cangdu.org:8001/shopping/v2/menu?restaurant_id=1')

        this.goods=res.data;

        console.log(this.goods);
          this.$nextTick(() => {
            // 初始化滚动
            this._initScroll()
            // 初始化tops
            this._initTops()
          })
      },
      _initScroll () {
        this.menuScroll = new BScroll(this.$refs.menuWrapper, {
          click: true
        })
        this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
          click: true,
          probeType: 3
        })
        //监视foods的滚动
        this.foodsScroll.on('scroll', (pos) => {
          // console.log(pos.x + '~' + pos.y)
          this.scrollY = Math.abs(Math.round(pos.y))
        })
      },

      _initTops () {
        const tops = []
        let top = 0
        // 计算各个 top, 并保存到tops
        tops.push(top)

        // 得到ul下所有的子li
        const lis = this.$refs.foodsWarpperUl.getElementsByClassName('food-list-hook')
        Array.prototype.slice.call(lis).forEach((li, index) => {
          top += li.clientHeight
          tops.push(top)
        })
        // 保存tops
        this.tops = tops
        console.log(this.tops)
      },

      clickMenuItem (index) {

        // 得到滚动目标坐标
        const top = this.tops[index]
        // 更新目标scrollY值
        this.scrollY = top
        // 平滑滚动到指定位置
        this.foodsScroll.scrollTo(0, -top, 300)
      }
    },

    computed: {
      // ...mapState(['goods']),
      currentIndex () {
        return this.tops.findIndex((top, index)=> {
          return this.scrollY>=top && this.scrollY<this.tops[index+1]
        })
      }
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
   @import "../../../../assets/common/stylus/mixins.styl"
   .activity_menu
     border-left: .15rem solid #3190e8;
     background-color: #fff;
   .goods
     display: flex
     position: absolute
     top: 223px
     bottom: 46px
     width: 100%
     overflow: hidden
     .menu-wrapper
       flex: 0 0 80px
       width: 3.8rem
       background: #f3f5f7
       .menu-item
           padding: 1.3rem .3rem;
           border-bottom: .025rem solid #ededed;
           box-sizing: border-box;
           border-left: .15rem solid #f8f8f8;
           position: relative;
         &.current
           position: relative
           z-index: 10
           margin-top: -1px
           background: #fff
           color: $green
           font-weight: 700
           .text
             font-size: .6rem;
             color: #666;
         .icon
           display: inline-block
           vertical-align: top
           width: 12px
           height: 12px
           margin-right: 2px
           background-size: 12px 12px
           background-repeat: no-repeat

         .text
           display: table-cell
           font-weight: 700
           vertical-align: middle
           bottom-border-1px(rgba(7, 17, 27, 0.1))
           font-size: 12px
     .foods-wrapper
       flex: 4
       .title
         padding-left: 14px
         height: 26px
         line-height: 26px
         border-left: 2px solid #d9dde1
         font-size: 12px
         color: rgb(147, 153, 159)
         background: #f3f5f7
       .food-item
         display: flex
         margin: 18px
         padding-bottom: 18px
         bottom-border-1px(rgba(7, 17, 27, 0.1))
         &:last-child
           border-none()
           margin-bottom: 0
         .icon
           flex: 0 0 57px
           margin-right: 10px
         .content
           flex: 1
           .name
             display: -webkit-box
             display: -ms-flexbox
             display: flex
             -webkit-box-pack: justify
             -ms-flex-pack: justify
             justify-content: space-between
             margin-bottom: .2rem
             color: rgb(7, 17, 27)
           .desc, .extra
             line-height: 10px
             font-size: 10px
             color: rgb(147, 153, 159)
           .desc
             line-height: 12px
             margin-bottom: 8px
           .extra
             .count
               margin-right: 12px
               float left
           .price
             font-weight: 700
             line-height: 24px
             .now
               margin-right: 8px
               font-size: 14px
               color: rgb(240, 20, 20)
             .old
               text-decoration: line-through
               font-size: 10px
               color: rgb(147, 153, 159)
           .cartcontrol-wrapper
             position: absolute
             right: 0
             bottom: 12px
</style>
